<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Descartes Framework Demo Page</title>
  <!-- Reset styles -->
  <link rel="stylesheet" type="text/css" href="css/dc-reset.min.css" />
  <!-- Layout styles -->
  <link rel="stylesheet" type="text/css" href="css/dc-layout.css" />
  <!-- Basic HTML styles for the demo -->
  <link rel="stylesheet" type="text/css" href="css/dc-demo.css" />
</head>
<body>
  <h1>Descartes Layout Framework</h1>
  <div id="about">
    <h2>About the Framework</h2>
    <img src="img/framed-hals-portrait-of-descartes.png" width="200" height="230" alt="Descartes portrait" />
    <h3>What is it?</h3>
    <p>The <em>Descartes Layout Framework</em> is a variant of the floated, negative margin-based layouts used in <cite><a href="http://developer.yahoo.com/yui/grids/">YUI Grids</a></cite> and A List Apart's <cite><a href="http://www.alistapart.com/articles/negativemargins/">Creating Liquid Layouts with Negative Margins</a></cite>.</p>
    <h3>Features</h3>
    <p><em>Descartes</em> offers the following features:</p>
    <ul>
      <li>nearly complete separation of display and source order:<br />
      <em>six of the eight possible permutations of two and three column layouts are possible</em></li>
      <li>extremely lightweight CSS:<br />
      <em>the CSS for the six layouts on this page is less than 1500 bytes minified</em></li>
      <li>moderately lightweight markup:<br />
      <em>two-column layouts require three divs, three-column layouts five divs</em></li>
      <li>minimal presentational markup required:<br /><em>change display order of columns by changing a single class name</em></li>
      <li>IE 5+ compatibility:<br />
      <em>most layouts will not require adjustment to work in IE5 or 6</em></li>
      <li>usable for fixed-width or liquid layouts specified in ems or pixels:<br />
      <em>make fully fluid or fully fixed layouts according to project requirements</em></li>
    </ul>
    <h3>How does it work?</h3>
    <p>The <em>Descartes</em> system is essentially a way of making two column layouts where one column's width is fixed and the other is fluid. Multicolumn layouts may easily be achieved by nesting one two column layout within another. This is the standard method for constructing layouts with the <em>Descartes</em> system.</p>
    <h3>Limitations</h3>
    <ul>
      <li>The method could be extended to produce layouts with four, five or more columns, but layouts with that number of columns are probably best produced by building a two-column layout and floating several divs inside the main (fluid-width) layout.</li>
      <li>Because a three-column layout made with the framework consists of two columns, one of which is further subdivided into two more columns, two out of the six theoretically possible three-column layouts cannot be achieved.</li>
    </ul>
    <h3>Sample layouts</h3>
    <p>The following examples demonstrate the six possible two and three column layouts that can be produced using the standard method (large numbers indicate source order):</p>
    <ul>
      <li><a href="#layout-1-2">Two Columns: source-order 1-2, layout 1-2</a></li>
      <li><a href="#layout-2-1">Two Columns: source-order 1-2, layout 2-1</a></li>
      <li><a href="#layout-3-1-2">Three Columns: source-order 1-2-3, layout 3-1-2</a></li>
      <li><a href="#layout-2-1-3">Three Columns: source-order 1-2-3, layout 2-1-3</a></li>
      <li><a href="#layout-1-2-3">Three Columns: source-order 1-2-3, layout 1-2-3</a></li>
      <li><a href="#layout-3-2-1">Three Columns: source-order 1-2-3, layout 3-2-1</a></li>
      <li>Three Columns: source-order 1-2-3, layout 2-3-1 [not possible with standard method]</li>
      <li>Three Columns: source-order 1-2-3, layout 1-3-2 [not possible with standard method]</li>
    </ul>
    <p>The &quot;<a href="http://en.wikipedia.org/wiki/Greeking">greeking</a>&quot; in the examples comes from the Latin text of Ren&eacute; Descartes' <cite><a href="http://www.gutenberg.org/etext/23306">Meditationes de prima philosophia</a></cite> (known in English as <cite><a href="http://en.wikipedia.org/wiki/Meditations_on_First_Philosophy">Meditations on First Philosophy</a></cite>).</p>
  </div>
    
  <!-- Two columns 1-2 -->
  <div class="dc-container" id="layout-1-2"><!-- document -->
    <div id="hd"><!-- header -->
      <h2>Two Columns: source-order 1-2, layout 1-2</h2>
      <p>This layout contains one fixed-width column at right, and one fluid width column at left. The source order of the columns is left column, right column.</p>
    </div><!-- /header -->
    <div id="bd" class="layout-1-2"><!-- body -->
      <div class="dc-main"><!-- main column -->
        <div class="dc-div">
          <h3>Meditatio I.</h3>
          <h4>De iis quae in dubium revocari possunt.</h4>
          <p>Animadverti jam ante aliquot annos quam multa ineunte aetate falsa pro veris admiserim, et quam dubia sint quaecunque istis postea superextruxi, ac proinde funditus omnia semel in vita esse evertenda, atque a primis fundamentis denuo inchoandum, si quid aliquando firmum et mansurum cupiam in scientiis stabilire; sed ingens opus esse videbatur, eamque aetatem expectabam, quae foret tam matura, ut capessendis disciplinis aptior nulla sequeretur. Quare tamdiu cunctatus sum ut deinceps essem in culpa, si quod temporis superest ad agendum, deliberando consumerem. Opportune igitur hodie mentem curis omnibus exsolvi, securum mihi otium procuravi, solus secedo, serio tandem et libere generali huic mearum opinionum eversioni vacabo&hellip;</p>
        </div>
      </div><!-- /main column -->
      <div class="dc-sub"><!-- sidebar -->
        <h3>Meditatio II.</h3>
        <h4>De natura mentis humanae. Quod ipsa sit notior quam corpus.</h4>
        <p>In tantas dubitationes hesterna meditatione conjectus sum, ut nequeam amplius earum oblivisci, nec videam tamen qua ratione solvendae sint, sed tanquam in profundum gurgitem ex improviso delapsus ita turbatus sum, ut nec possim in imo pedem figere, nec enatare ad summum. Enitar tamen et tentabo rursus eandem viam quam heri fueram ingressus, removendo scilicet illud omne quod vel minimum dubitationis admittit&hellip;</p>
      </div><!-- /sidebar -->
    </div><!-- /body -->
    <div id="ft"><!-- footer -->
      <p>The relevant structural markup in this layout differs from the markup in <a href="#layout-2-1">the next example</a> only in the class name applied to the #bd element. Columns shown unpadded to simplify CSS.</p>
    </div><!-- /footer -->
  </div><!-- /document -->
  <!-- /two columns 1-2 -->
  
  <hr />
  <div class="top-link"><a href="#about">Back to top</a></div>

  <!-- Two columns 2-1 -->
  <div class="dc-container" id="layout-2-1"><!-- document -->
    <div id="hd"><!-- header -->
      <h2>Two Columns: source-order 1-2, layout 2-1</h2>
      <p>This layout contains one fixed-width column at left, and one fluid width column at right. The source order of the columns is right column, left column.</p>
    </div><!-- /header -->
    <div id="bd" class="layout-2-1"><!-- body -->
      <div class="dc-main"><!-- main column -->
        <div class="dc-div">
          <h3>Meditatio I.</h3>
          <h4>De iis quae in dubium revocari possunt.</h4>
          <p>Animadverti jam ante aliquot annos quam multa ineunte aetate falsa pro veris admiserim, et quam dubia sint quaecunque istis postea superextruxi, ac proinde funditus omnia semel in vita esse evertenda, atque a primis fundamentis denuo inchoandum, si quid aliquando firmum et mansurum cupiam in scientiis stabilire; sed ingens opus esse videbatur, eamque aetatem expectabam, quae foret tam matura, ut capessendis disciplinis aptior nulla sequeretur. Quare tamdiu cunctatus sum ut deinceps essem in culpa, si quod temporis superest ad agendum, deliberando consumerem. Opportune igitur hodie mentem curis omnibus exsolvi, securum mihi otium procuravi, solus secedo, serio tandem et libere generali huic mearum opinionum eversioni vacabo&hellip;</p>
        </div>
      </div><!-- /main column -->
      <div class="dc-sub"><!-- sidebar -->
        <h3>Meditatio II.</h3>
        <h4>De natura mentis humanae. Quod ipsa sit notior quam corpus.</h4>
        <p>In tantas dubitationes hesterna meditatione conjectus sum, ut nequeam amplius earum oblivisci, nec videam tamen qua ratione solvendae sint, sed tanquam in profundum gurgitem ex improviso delapsus ita turbatus sum, ut nec possim in imo pedem figere, nec enatare ad summum. Enitar tamen et tentabo rursus eandem viam quam heri fueram ingressus, removendo scilicet illud omne quod vel minimum dubitationis admittit&hellip;</p>
      </div><!-- /sidebar -->
    </div><!-- /body -->
    <div id="ft"><!-- footer -->
      <p>The relevant structural markup in this layout differs from the markup in <a href="#layout-1-2">the previous example</a> only in the class name applied to the #bd element. Columns shown unpadded to simplify CSS.</p>
    </div><!-- /footer -->
  </div><!-- /document -->
  <!-- /two columns 2-1 -->

  <hr />
  <div class="top-link"><a href="#about">Back to top</a></div>

  <!-- Three columns 3-1-2 -->
  <div class="dc-container" id="layout-3-1-2"><!-- document -->
    <div id="hd"><!-- header -->
      <h2>Three Columns: source-order 1-2-3, layout 3-1-2</h2>
      <p>This layout contains two fixed-width columns at left and right, and one fluid width column between them. The source order of the columns is center column, right column, left column.</p>
    </div><!-- /header -->
    <div id="bd" class="layout-3-1-2"><!-- body -->
      <div class="dc-main"><!-- main column -->
        <div class="dc-div">
          <div class="dc-main">
            <div class="dc-div">
              <h3>Meditatio I.</h3>
              <h4>De iis quae in dubium revocari possunt.</h4>
              <p>Animadverti jam ante aliquot annos quam multa ineunte aetate falsa pro veris admiserim, et quam dubia sint quaecunque istis postea superextruxi, ac proinde funditus omnia semel in vita esse evertenda, atque a primis fundamentis denuo inchoandum, si quid aliquando firmum et mansurum cupiam in scientiis stabilire; sed ingens opus esse videbatur, eamque aetatem expectabam, quae foret tam matura, ut capessendis disciplinis aptior nulla sequeretur. Quare tamdiu cunctatus sum ut deinceps essem in culpa, si quod temporis superest ad agendum, deliberando consumerem. Opportune igitur hodie mentem curis omnibus exsolvi, securum mihi otium procuravi, solus secedo, serio tandem et libere generali huic mearum opinionum eversioni vacabo&hellip;</p>
            </div>
          </div>
          <div class="dc-sub">
            <h3>Meditatio II.</h3>
            <h4>De natura mentis humanae. Quod ipsa sit notior quam corpus.</h4>
            <p>In tantas dubitationes hesterna meditatione conjectus sum, ut nequeam amplius earum oblivisci, nec videam tamen qua ratione solvendae sint, sed tanquam in profundum gurgitem ex improviso delapsus ita turbatus sum, ut nec possim in imo pedem figere, nec enatare ad summum. Enitar tamen et tentabo rursus eandem viam quam heri fueram ingressus, removendo scilicet illud omne quod vel minimum dubitationis admittit&hellip;</p>
          </div><!-- /content columns -->
        </div>
      </div><!-- /main column -->
      <div class="dc-sub"><!-- sidebar -->
        <h3>Meditatio III.</h3>
        <h4>De Deo, quod existat.</h4>
        <p>Claudam nunc oculos, aures obturabo, avocabo omnes sensus, imagines etiam rerum corporalium omnes vel ex cogitatione mea delebo, vel certe, quia hoc fieri vix potest, illas ut inanes et falsas nihili pendam, meque solum alloquendo, et penitius inspiciendo, meipsum paulatim mihi magis notum et familiarem reddere conabor. Ego sum res cogitans, id est dubitans, affirmans, negans, pauca intelligens, multa ignorans, volens, nolens, imaginans etiam et sentiens&hellip;</p>
      </div><!-- /sidebar -->
    </div><!-- /body -->
    <div id="ft"><!-- footer -->
      <p>The relevant structural markup in this layout differs from the markup in <a href="#layout-2-1-3">the next example</a> only in the class name applied to the #bd element. Columns shown unpadded to simplify CSS.</p>
    </div><!-- /footer -->
  </div><!-- /document -->
  <!-- /three columns 3-1-2 -->
  
  <hr />
  <div class="top-link"><a href="#about">Back to top</a></div>

  <!-- Three columns 2-1-3 -->
  <div class="dc-container" id="layout-2-1-3"><!-- document -->
    <div id="hd"><!-- header -->
      <h2>Three Columns: source-order 1-2-3, layout 2-1-3</h2>
      <p>This layout contains two fixed-width columns at left and right, and one fluid width column between them. The source order of the columns is center column, left column, right column.</p>
    </div><!-- /header -->
    <div id="bd" class="layout-2-1-3"><!-- body -->
      <div class="dc-main"><!-- main column -->
        <div class="dc-div">
          <div class="dc-main">
            <div class="dc-div">
              <h3>Meditatio I.</h3>
              <h4>De iis quae in dubium revocari possunt.</h4>
              <p>Animadverti jam ante aliquot annos quam multa ineunte aetate falsa pro veris admiserim, et quam dubia sint quaecunque istis postea superextruxi, ac proinde funditus omnia semel in vita esse evertenda, atque a primis fundamentis denuo inchoandum, si quid aliquando firmum et mansurum cupiam in scientiis stabilire; sed ingens opus esse videbatur, eamque aetatem expectabam, quae foret tam matura, ut capessendis disciplinis aptior nulla sequeretur. Quare tamdiu cunctatus sum ut deinceps essem in culpa, si quod temporis superest ad agendum, deliberando consumerem. Opportune igitur hodie mentem curis omnibus exsolvi, securum mihi otium procuravi, solus secedo, serio tandem et libere generali huic mearum opinionum eversioni vacabo&hellip;</p>
            </div>
          </div>
          <div class="dc-sub">
            <h3>Meditatio II.</h3>
            <h4>De natura mentis humanae. Quod ipsa sit notior quam corpus.</h4>
            <p>In tantas dubitationes hesterna meditatione conjectus sum, ut nequeam amplius earum oblivisci, nec videam tamen qua ratione solvendae sint, sed tanquam in profundum gurgitem ex improviso delapsus ita turbatus sum, ut nec possim in imo pedem figere, nec enatare ad summum. Enitar tamen et tentabo rursus eandem viam quam heri fueram ingressus, removendo scilicet illud omne quod vel minimum dubitationis admittit&hellip;</p>
          </div>
        </div>
      </div><!-- /main column -->
      <div class="dc-sub"><!-- sidebar -->
        <h3>Meditatio III.</h3>
        <h4>De Deo, quod existat.</h4>
        <p>Claudam nunc oculos, aures obturabo, avocabo omnes sensus, imagines etiam rerum corporalium omnes vel ex cogitatione mea delebo, vel certe, quia hoc fieri vix potest, illas ut inanes et falsas nihili pendam, meque solum alloquendo, et penitius inspiciendo, meipsum paulatim mihi magis notum et familiarem reddere conabor. Ego sum res cogitans, id est dubitans, affirmans, negans, pauca intelligens, multa ignorans, volens, nolens, imaginans etiam et sentiens&hellip;</p>
      </div><!-- /sidebar -->
    </div><!-- /body -->
    <div id="ft"><!-- footer -->
      <p>The relevant structural markup in this layout differs from the markup in <a href="#layout-3-1-2">the previous example</a> only in the class name applied to the #bd element. Columns shown unpadded to simplify CSS.</p>
    </div><!-- /footer -->
  </div><!-- /document -->
  <!-- /three columns 2-1-3 -->
  
  <hr />
  <div class="top-link"><a href="#about">Back to top</a></div>
  
  <!-- Three columns 1-2-3 -->
  <div class="dc-container" id="layout-1-2-3"><!-- document -->
    <div id="hd"><!-- header -->
      <h2>Three Columns: source-order 1-2-3, layout 1-2-3</h2>
      <p>This layout contains two fixed-width columns, both at right, and one fluid width column at left The source order of the columns is left column, center column, right column.</p>
    </div><!-- /header -->
    <div id="bd" class="layout-1-2-3"><!-- body -->
      <div class="dc-main"><!-- main column -->
        <div class="dc-div">
          <div class="dc-main">
            <div class="dc-div">
              <h3>Meditatio I.</h3>
              <h4>De iis quae in dubium revocari possunt.</h4>
              <p>Animadverti jam ante aliquot annos quam multa ineunte aetate falsa pro veris admiserim, et quam dubia sint quaecunque istis postea superextruxi, ac proinde funditus omnia semel in vita esse evertenda, atque a primis fundamentis denuo inchoandum, si quid aliquando firmum et mansurum cupiam in scientiis stabilire; sed ingens opus esse videbatur, eamque aetatem expectabam, quae foret tam matura, ut capessendis disciplinis aptior nulla sequeretur. Quare tamdiu cunctatus sum ut deinceps essem in culpa, si quod temporis superest ad agendum, deliberando consumerem. Opportune igitur hodie mentem curis omnibus exsolvi, securum mihi otium procuravi, solus secedo, serio tandem et libere generali huic mearum opinionum eversioni vacabo&hellip;</p>
            </div>
          </div>
          <div class="dc-sub">
            <h3>Meditatio II.</h3>
            <h4>De natura mentis humanae. Quod ipsa sit notior quam corpus.</h4>
            <p>In tantas dubitationes hesterna meditatione conjectus sum, ut nequeam amplius earum oblivisci, nec videam tamen qua ratione solvendae sint, sed tanquam in profundum gurgitem ex improviso delapsus ita turbatus sum, ut nec possim in imo pedem figere, nec enatare ad summum. Enitar tamen et tentabo rursus eandem viam quam heri fueram ingressus, removendo scilicet illud omne quod vel minimum dubitationis admittit&hellip;</p>
          </div>
        </div>
      </div><!-- /main column -->
      <div class="dc-sub"><!-- sidebar -->
        <h3>Meditatio III.</h3>
        <h4>De Deo, quod existat.</h4>
        <p>Claudam nunc oculos, aures obturabo, avocabo omnes sensus, imagines etiam rerum corporalium omnes vel ex cogitatione mea delebo, vel certe, quia hoc fieri vix potest, illas ut inanes et falsas nihili pendam, meque solum alloquendo, et penitius inspiciendo, meipsum paulatim mihi magis notum et familiarem reddere conabor. Ego sum res cogitans, id est dubitans, affirmans, negans, pauca intelligens, multa ignorans, volens, nolens, imaginans etiam et sentiens&hellip;</p>
      </div><!-- /sidebar -->
    </div><!-- /body -->
    <div id="ft"><!-- footer -->
      <p>The relevant structural markup in this layout differs from the markup in the <a href="#layout-2-1-3">previous</a> <a href="#layout-3-1-2">examples</a> only in the class name applied to the #bd element. Columns shown unpadded to simplify CSS.</p>
    </div><!-- /footer -->
  </div><!-- /document -->
  <!-- /three columns 1-2-3 -->  
  
  <hr />
  <div class="top-link"><a href="#about">Back to top</a></div>
  
  <!-- Three columns 3-2-1 -->
  <div class="dc-container" id="layout-3-2-1"><!-- document -->
    <div id="hd"><!-- header -->
      <h2>Three Columns: source-order 1-2-3, layout 3-2-1</h2>
      <p>This layout contains two fixed-width columns at left, and one fluid width column at right. The source order of the columns is right column, center column, left column.</p>
    </div><!-- /header -->
    <div id="bd" class="layout-3-2-1"><!-- body -->
      <div class="dc-main"><!-- main column -->
        <div class="dc-div">
          <div class="dc-main">
            <div class="dc-div">
              <h3>Meditatio I.</h3>
              <h4>De iis quae in dubium revocari possunt.</h4>
              <p>Animadverti jam ante aliquot annos quam multa ineunte aetate falsa pro veris admiserim, et quam dubia sint quaecunque istis postea superextruxi, ac proinde funditus omnia semel in vita esse evertenda, atque a primis fundamentis denuo inchoandum, si quid aliquando firmum et mansurum cupiam in scientiis stabilire; sed ingens opus esse videbatur, eamque aetatem expectabam, quae foret tam matura, ut capessendis disciplinis aptior nulla sequeretur. Quare tamdiu cunctatus sum ut deinceps essem in culpa, si quod temporis superest ad agendum, deliberando consumerem. Opportune igitur hodie mentem curis omnibus exsolvi, securum mihi otium procuravi, solus secedo, serio tandem et libere generali huic mearum opinionum eversioni vacabo&hellip;</p>
            </div>
          </div>
          <div class="dc-sub">
            <h3>Meditatio II.</h3>
            <h4>De natura mentis humanae. Quod ipsa sit notior quam corpus.</h4>
            <p>In tantas dubitationes hesterna meditatione conjectus sum, ut nequeam amplius earum oblivisci, nec videam tamen qua ratione solvendae sint, sed tanquam in profundum gurgitem ex improviso delapsus ita turbatus sum, ut nec possim in imo pedem figere, nec enatare ad summum. Enitar tamen et tentabo rursus eandem viam quam heri fueram ingressus, removendo scilicet illud omne quod vel minimum dubitationis admittit&hellip;</p>
          </div>
        </div>
      </div><!-- /main column -->
      <div class="dc-sub"><!-- sidebar -->
        <h3>Meditatio III.</h3>
        <h4>De Deo, quod existat.</h4>
        <p>Claudam nunc oculos, aures obturabo, avocabo omnes sensus, imagines etiam rerum corporalium omnes vel ex cogitatione mea delebo, vel certe, quia hoc fieri vix potest, illas ut inanes et falsas nihili pendam, meque solum alloquendo, et penitius inspiciendo, meipsum paulatim mihi magis notum et familiarem reddere conabor. Ego sum res cogitans, id est dubitans, affirmans, negans, pauca intelligens, multa ignorans, volens, nolens, imaginans etiam et sentiens&hellip;</p>
      </div><!-- /sidebar -->
    </div><!-- /body -->
    <div id="ft"><!-- footer -->
      <p>The relevant structural markup in this layout differs from the markup in the <a href="#layout-2-1-3">three</a> <a href="#layout-3-1-2">previous</a> <a href="#layout-1-2-3">examples</a> only in the class name applied to the #bd element. Columns shown unpadded to simplify CSS.</p>
    </div><!-- /footer -->
  </div><!-- /document -->
  <!-- /three columns 3-2-1 --> 
  
  <hr />
  <div class="top-link"><a href="#about">Back to top</a></div>
</body>
</html>